import Vue from 'vue'

const focus = Vue.directive('focus', {
    inserted: function (el) {
      el.focus()
      el.setAttribute('placeholder', '爱的发生的发')
    }
  }
)

const drag = Vue.directive('drag', {
    inserted: function (el) {
      let oDiv = el
      let disX = 0
      let disY = 0
      oDiv.onmouseenter = function (e) {
        console.log('mouse entering')
      }
      oDiv.onmouseout = function (e) {
        console.log('mouse outting')
      }
      oDiv.onmousedown = function (e) {
        let oEvent = e || event

        disX = oEvent.clientX - oDiv.offsetLeft
        disY = oEvent.clientY - oDiv.offsetTop
        // 组件按下鼠标，可以移动
        document.onmousemove = function (e) {
          let oEvent = e || event
          let l = oEvent.clientX - disX
          let t = oEvent.clientY - disY

          // 把移动值 赋给 拖动体的 定位坐标
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
          console.log('i am moving后 ...........', oDiv.style.left)
          console.log('i am moving 后...........', oDiv.style.top)
        }
      }
      document.onmouseup = function (ex) {
        // 松开鼠标---监听的是document
        console.log('松开鼠标：mouse up', oDiv.style)
        console.log('松开鼠标 ...........', ex.clientX)
        console.log('松开鼠标...........', ex.clientY)
        document.onmousemove = null
        oDiv.onmouseup = null
      }
    }
  }
)

export {focus, drag}
